<template>
  <a-form
    :model="formState"
    :label-col="{ span: 4 }"
    :wrapper-col="{ span: 14 }"
    autocomplete="off"
    @finish="onFinish"
    @finishFailed="onFinishFailed"
  >
    <a-form-item
      label="单位名称"
      name="name"
      :rules="[{ required: true, message: '请输入单位名称' }]"
    >
      <a-input v-model:value="formState.name" />
    </a-form-item>

    <a-form-item label="上传LOGO">
      <a-form-item name="logo" no-style>
        <img :src="logoSrc" style="margin-bottom: 10px" v-show="logoSrc" alt="" />
        <a-upload-dragger
          :maxCount="1"
          v-model:fileList="formState.logo"
          name="files"
          action="http://127.0.0.1:5000/biz-api/File/upload"
          :headers="headers"
          @change="handleUpload"
        >
          <p class="ant-upload-drag-icon">
            <!-- <InboxOutlined /> -->
            <Icon icon="ant-design:inbox-outlined" size="40" />
          </p>
          <p class="ant-upload-text">点击或拖动文件到此区域进行上传</p>
          <p class="ant-upload-hint">上传图片不要超过200M</p>
        </a-upload-dragger>
      </a-form-item>
    </a-form-item>

    <a-form-item label="联系地址" name="address" placeholder="请输入联系地址">
      <a-input v-model:value="formState.address" />
    </a-form-item>

    <a-form-item label="联系电话" name="phone" placeholder="请输入联系电话">
      <a-input v-model:value="formState.phone" />
    </a-form-item>

    <a-form-item label="说明" name="description">
      <Tinymce
        :showImageUpload="false"
        :toolbar="[
          'blocks | bold italic underline strikethrough | blockquote | align bullist numlist',
        ]"
        height="300px"
        v-model="formState.description"
      />
    </a-form-item>
  </a-form>
</template>
  
  <script lang="ts">
import { defineComponent, ref } from 'vue';
import { Tinymce } from '/@/components/Tinymce/index';
import { Icon } from '/@/components/Icon';
import { defHttp } from '/@/utils/http/axios';
import { message } from 'ant-design-vue';
import { getToken } from '/@/utils/auth';

interface FormState {
  name: string;
  logo: any;
  address: string;
  phone: string;
  description: string;
}
export default defineComponent({
  components: { Tinymce, Icon },
  setup() {
    const formState = ref<FormState>({
      name: '',
      logo: [],
      address: '',
      phone: '',
      description: '',
    });
    const logoSrc = ref('');
    const token = getToken();
    const headers = { Authorization: `Bearer ${token}` };

    const onFinish = () => {
      let logo = formState.value.logo.length ? formState.value.logo[0].response.data[0].url : '';
      defHttp
        .post({
          url: '/company/update',
          params: {
            id: 1,
            name: formState.value.name,
            logo,
            address: formState.value.address,
            tel: formState.value.phone,
            comment: formState.value.description,
          },
        })
        .then((res) => {
          message.success('修改成功');
        });
    };

    const onFinishFailed = (errorInfo: any) => {
      console.log('Failed:', errorInfo);
    };

    function getCompany() {
      defHttp.get({ url: '/company/get', params: { id: 1 } }).then((res) => {
        formState.value = {
          name: res.data.name,
          logo: [],
          address: res.data.address,
          phone: res.data.tel,
          description: res.data.comment,
        };
        logoSrc.value = 'http://127.0.0.1/szfiles' + res.data.logo;
      });
    }

    function handleUpload(info) {
      if (info.file.status === 'done') {
        // console.log(formState.value.logo[0].response.data[0].url);
        message.success(`${info.file.name} 上传成功`);
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} 上传失败`);
      }
    }

    getCompany();

    return {
      formState,
      onFinish,
      onFinishFailed,
      headers,
      handleUpload,
      logoSrc,
    };
  },
});
</script>
  
